<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/admin/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- The styles -->
	<link id="bs-css" href="${ctxCss}/bootstrap-cerulean.css" rel="stylesheet">
	<style type="text/css">
	  body {
		padding-bottom: 40px;
	  }
	  .sidebar-nav {
		padding: 9px 0;
	  }
	</style>
	<link href="${ctxCss}/bootstrap-responsive.css" rel="stylesheet">
	<link href="${ctxCss}/charisma-app.css" rel="stylesheet">
	<link href="${ctxCss}/jquery-ui-1.8.21.custom.css" rel="stylesheet">
	<link href='${ctxCss}/uniform.default.css' rel='stylesheet'>
	<link href='${ctxCss}/colorbox.css' rel='stylesheet'>
	<link href='${ctxCss}/chosen.css' rel='stylesheet'>	
	<!-- jQuery -->
	<script type="text/javascript" src="${ctxJs}/jquery-1.7.2.min.js"></script>
	<!-- jQuery UI -->
	<script type="text/javascript" src="${ctxJs}/jquery-ui-1.8.21.custom.min.js"></script>
	<!-- library for creating tabs -->
	<script type="text/javascript"  src="${ctxJs}/bootstrap-tab.js"></script>
	<!-- library for advanced tooltip -->
	<script type="text/javascript" src="${ctxJs}/bootstrap-tooltip.js"></script>
	<!-- popover effect library -->
	<script type="text/javascript" src="${ctxJs}/bootstrap-popover.js"></script>
	<!-- button enhancer library -->
	<script type="text/javascript" src="${ctxJs}/bootstrap-button.js"></script>
	<!-- autocomplete library -->
	<script type="text/javascript" src="${ctxJs}/bootstrap-typeahead.js"></script>
	<!-- tour library -->
	<script type="text/javascript" src="${ctxJs}/bootstrap-tour.js"></script>
   


<!-- chart libraries start
	<script type="text/javascript" src="${ctxJs}/excanvas.js"></script>
	<script type="text/javascript" src="${ctxJs}/jquery.flot.min.js"></script>
	<script type="text/javascript" src="${ctxJs}/jquery.flot.pie.min.js"></script>
	<script type="text/javascript" src="${ctxJs}/jquery.flot.stack.js"></script>
	<script type="text/javascript" src="${ctxJs}/jquery.flot.resize.min.js"></script>
	 -->
	<!-- select or dropdown enhancer -->
	<script type="text/javascript" src="${ctxJs}/jquery.chosen.min.js"></script>
	<!-- checkbox, radio, and file input styler -->
	<script type="text/javascript" src="${ctxJs}/jquery.uniform.min.js"></script>
	<!-- plugin for gallery image view -->
	<script type="text/javascript" src="${ctxJs}/jquery.colorbox.min.js"></script>
	<!-- rich text editor library -->
	<script type="text/javascript" src="${ctxJs}/jquery.cleditor.min.js"></script>

	<!-- for iOS style toggle switch -->
	<script type="text/javascript" src="${ctxJs}/jquery.iphone.toggle.js"></script>

	<script type="text/javascript" src="${ctxJs}/jquery.history.js"></script>
	
	 <script type="text/javascript" src="${ctxJs}/charisma.js"></script>
</head>
<body>
					<div class="container-fluid">
		<div class="row-fluid">
		
			<div class="row-fluid">
				<div class="span12 center login-header">
					<h2>Welcome to Charisma</h2>
				</div><!--/span-->
			</div><!--/row-->
			
			<div class="row-fluid">
				<div class="well span5 center login-box">
				   <c:if test="${error!=null}">
					<div class="alert alert-info">
						${error}
					</div>
					</c:if>
					<form class="form-horizontal" action="admin/login" method="post">
						<fieldset>
							<div class="input-prepend" title="Username" data-rel="tooltip">
								<span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="username" id="username" type="text"  />
							</div>
							<div class="clearfix"></div>

							<div class="input-prepend" title="Password" data-rel="tooltip">
								<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password" />
							</div>
							<div class="clearfix"></div>

							<div class="input-prepend">
							<label class="remember" for="remember"><input type="checkbox" id="remember" />Remember me</label>
							</div>
							<div class="clearfix"></div>

							<p class="center span5">
							<button type="submit" class="btn btn-primary">Login</button>
							</p>
						</fieldset>
					</form>
				</div><!--/span-->
			</div><!--/row-->
				</div><!--/fluid-row-->
		
	</div>
</body>
</html>